<template>
  <div>
    <div class="car-title">
      <h2>我的购物车</h2>
    </div>
    <div class="cart-header">
      <el-button type="success" size="small">我的购物车 ({{cartNum}})</el-button>
      <a v-if="cartNum !== 0" href="javaScript:void(0)" @click="goHome">继续选购物--</a>
      <el-button v-if="cartNum !== 0" class="button-clean" size="small" type="danger" @click="clearCart">清空购物车
      </el-button>
    </div>
    <div class="cart-content">
      <div v-if="cartNum === 0">
        <ul class="empty-cart">
          <li>
            <p>您的购物车是空的,点击快去选购商品吧!</p>
          </li>
          <li class="cart-login">
            <el-button type="primary" size="mini" @click="login">登录</el-button>
            <a href="javaScript:void(0)" @click="goHome">去购物?</a>
          </li>
        </ul>
      </div>
      <div v-else>
        <el-table style="width: 100%" border :data="products" size="mini">
          <el-table-column prop="id" label="id" style="width: 10%"/>
          <el-table-column prop="name" label="商品名称" style="width: 20%"/>
          <el-table-column prop="price" label="单价" style="width: 20%;"/>
          <el-table-column label="数量" style="width: 20%">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" :disabled="scope.row.count <= 0"
                         @click="decreaseProduct(scope.row)">-
              </el-button>
              {{scope.row.count}}
              <el-button size="mini" type="primary" :disabled="scope.row.count >= 20"
                         @click="increaseProduct(scope.row)">+
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="商品价格￥" style="width: 20%">
            <template slot-scope="scope">
              {{scope.row.count * scope.row.price}}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger" size="small" @click="deleteProduct(scope.row)">删除商品</el-button>
            </template>
          </el-table-column>
        </el-table>
        <p>
          商品总价:{{totalPrice}}￥
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: "Cart",
        totalPrice: 0
      }
    },
    computed: {
      cartNum() {
        return this.$store.state.cart.num;
      },
      products() {
        return this.$store.state.cart.cartProducts;
      }
    },
    mounted() {
      this.getTotalPrice();
    },
    watch: {
      products() {
        this.getTotalPrice();
      }
    },
    methods: {
      goHome() {
        this.$router.push({name:'Product'});
      },
      increaseProduct(row) {
        this.updateTableData(row);
        this.$store.commit('cart/increaseProduct', row);
      },
      decreaseProduct(row) {
        this.updateTableData(row);
        this.$store.commit('cart/decreaseProduct', row);
      },
      /**
       * 用来更新新表格数据
       * @param row
       */
      updateTableData(row) {
        let index = this.products.indexOf(row);
        this.products.splice(index, 1, row);
      },
      /**
       * 删除购物车里面的商品的信息
       * @param row
       */
      deleteProduct(row) {
        let index = this.products.indexOf(row);
        this.products.splice(index, 1);
        let count = row.count;
        this.$store.commit('cart/deleteProduct', {index, count});
      },
      /**
       * 计算当前购物车中的商品总价
       */
      getTotalPrice() {
        let productPrice = 0;
        this.products.forEach((item) => {
          productPrice = productPrice + item.count * item.price;
        });
        this.totalPrice = productPrice;
      },
      /**
       * 清空当前购物车
       */
      clearCart() {
        let _this = this;
        this.$confirm('此操作将删除购物车有所有的商品,是否确认?','提示',{
          confirmButtonText:'确认',
          cancelButtonText:'取消',
          type:'warning'
        }).then(()=>{
          _this.$store.commit('cart/clearCar');
        }).catch(()=>{});
      },
      /**
       * 去登录用户
       */
      login(){
        this.$router.push('/');
      }
    }
  }
</script>

<style scoped>
  .car-title {
    text-align: center;
    background-color: #E4E7ED;
    padding: 20px 0;
  }

  .cart-header {
    position: relative;
    text-align: left;
    margin-top: 30px;
  }

  .cart-content {
    margin-top: 50px;
  }

  .empty-cart {
    list-style-type: none;
    text-align: center;
    background-color: #E4E7ED;
    padding: 20px 0;
  }

  ul li {
    margin: 5px 0;
  }

  .button-clean {
    position: absolute;
    top: 0;
    right: 0;
  }
</style>
